<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=sankey-nodeAlign-right&code=LYTwwgFghgTgLgOgM4QPYHcAyqoBMCWAdgOYAUAlANwBQAJAsQKZykBKA8uwCoD6ACgEEuACQAEAalEByAPS4ocKDKhIkzOQqWNCjGMRAIAVklSEpAGlEAzAK6EAxnHynRpeYvKiA3tVGjQkLCIEPi4jNh4RGRUvv7g0PDIzOwADk6mpLF-pKhpzoSiALzeWX6iTnAANowAXCVlDeWMAB5wdVIAcqhhogKV-MQFmIxWcFKlfgC-5hPlqKiVTil1Po1lcDADTDDt-HCMwBazfhtbuuyE7cCoNmrXAG6M42vTs1CE-MAK-XUbNowzNZqTaMJB1ADax3qa3WIBStWkSHeAGtGCAjjCygcUtAkPgwdDMX4rKh7Ld2nhDFB7Np7OioVNAUTCN1GH0BpdpNVRhiie4oHV-QgWWEkEzMf1CMiCULJdLxTDJYwAMpwEDVFYMsr2BaoHaIm4wGm8omiMkwR46VR1AAMCAArFrJlDnWsALqlSbkWIxL2UIA
	⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>

    <script type="text/javascript">
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom, null, {
        renderer: 'svg',
        useDirtyRect: false,
      });
      // 文档 https://echarts.apache.org/zh/option.html#series-sankey
      var app = {};
      var ROOT_PATH = ''; //'https://echarts.apache.org/examples';
      var option;

      myChart.showLoading();
      //$.get(ROOT_PATH + '/arch/energy.json', function (data) {
      $.get(ROOT_PATH + '/arch/applayer.json', function (data) {
        myChart.hideLoading();
        myChart.setOption(
          (option = {
            title: {
              text: '分层架构图',
            },
            tooltip: {
              trigger: 'item',
              triggerOn: 'mousemove',
              formatter: function (params) {
                if (params.data.source) {
                  // For links
                  return params.data.source + ' → ' + params.data.target + '<br/>' + (params.data.title || ''); // For edges
                } else if (params.data.title) {
                  return params.data.name + '<br/>' + params.data.title; // For nodes
                }
              },
            },
            animation: true,
            series: [
              {
                type: 'sankey',
                emphasis: {
                  focus: 'trajectory',
                },
                nodeAlign: 'right',
                layoutIterations: 0,
                data: data.nodes.map((node) => ({
                  ...node,
                  label: {
                    show: true, // 显示节点标签
                    formatter: `${node.name}\n\n${node.title}`, // 使用自定义标签或默认名称
                  },
                })),
                links: data.links,
                lineStyle: {
                  color: 'gradient',
                  curveness: 0.5,
                },
                itemStyle: {
                  borderRadius: 5,
                },
              },
            ],
          })
        );
      });
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }

      window.addEventListener('resize', myChart.resize);
    </script>
  </body>
</html>
